<template>
    <el-row class-name="__tool_list">
        <el-col class="__tool_item" :span="8" v-for="(tool,i) in value" :key="i">
            <div class="__default"  v-iwidget="tool">
                <div class="__icon">
                    <i :class="tool.icon"></i>
                </div>
                <div class="__name">
                    {{ tool.title}}
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script type="text/javascript">
export default {
    components: {
        //empty
    },
    props: {
        value: [Array, Object]
    },
    data() {
        return {

        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {

    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {

    }
}
</script>
<style type="text/css" lang="scss">
.__tool_list {
    padding: 0;
}

.__tool_item {
    position: relative;
    width: 95px;
    height: 95px;
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    border-left: 0;
    border-top: 0;
    text-align: center;
    cursor: move;

    .__icon {
        padding-top: 20px;
        margin-bottom: 5px;

        i {
            font-size: 30px;
            color: #9fcdff;
        }
    }

    .__name {
        font-size: 12px;
        color: #000;
    }
}

.__tool_item:nth-child(3n+0) {
    border-right: 0;
}


.__tool_item:hover {
    background-color: #3fa5ff;

    .__name {

        color: #fff;
    }

    .__icon {
        i.ivu-icon {
            color: #fff;
        }
    }
}

.__tool_item.active {
    background-color: #3fa5ff;

    .__name {

        color: #fff;
    }

    .__icon {
        i.ivu-icon {
            color: #fff;
        }
    }
}
</style>